<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>自主招生报名</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="format-detection" content="telephone=no"/>
    <link href="${s.base}/mobile/css/weui.min.css" rel="stylesheet" />
    <link href="${s.base}/mobile/css/jquery-weui.css" rel="stylesheet"/>
    <link href="${s.base}/mobile/css/jquery-weui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="${s.base}/mobile/css/enrollment/zzzs.css"/>
</head>
<body style="background:#f1f1f1;">
<div class="main-content75" >
    <div id="family-list">
        <!--<div class="data-entry-ctn">
            <div class="data-entry-title data-entry-title-bg"><span>家庭成员1</span></div>
            <div class="div-input-line">
                <label><span class="red">*</span>姓名</label>
                <input class="input-name" type="text" value="" placeholder="请输入" />
            </div>
            <div class="div-input-line">
                <label><span class="red">*</span>称谓</label>
                <input class="input-appellation" type="text" value="" placeholder="请选择" />
            </div>
            <div class="div-input-line">
                <label>工作单位</label>
                <input class="input-workplace" type="text" value="" placeholder="请选择" />
            </div>
            <div class="div-input-line">
                <label>职务</label>
                <input class="input-post" type="text" value="" placeholder="请选择" />
            </div>
            <div class="div-input-line">
                <label><span class="red">*</span>联系电话</label>
                <input class="input-phonenum" type="number" value="" placeholder="请选择" />
            </div>
        </div>-->
    </div>
    <div class="data-list-add" onclick="addFamily(null)"><i class="cyfont">&#xe601;</i>加家庭成员</div>
    <div class="zzzs-btn-ctn mart40">
        <button type="button" onclick="prePage()">上一步</button>
        <button type="button" onclick="nextPage()">下一步</button>
    </div>
</div>
</body>
<script type="text/javascript" src="${s.base}/mobile/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="${s.base}/mobile/js/jquery-weui.js"></script>
<script type="text/javascript" src="${s.base}/mobile/js/fontSize.js"></script>
<script type="text/javascript" src="${s.base}/mobile/js/common.js"></script>
<script type="text/javascript">
    var genderList = JSON.parse('${genderList}');
    $(function () {
        var homeInfo = '${homeInfo}';
        if(isNotBlank(homeInfo)){
            var homeList = jQuery.parseJSON(homeInfo);
            if(homeList != null && homeList.length >0){
                for (var i =0;i<homeList.length;i++){
                    addFamily(homeList[i]);
                }
            }else{
                addFamily(null);
            }
        }else{
            addFamily(null);
        }

    });

    function initListener() {
        $(".input-appellation").select({
            title: "选择称谓",
            items: genderList,
            closeText:"关闭",
            onChange: function(d) {
                console.log(this, d);
            },
            onClose: function(d,element) {
                $(element).val(d.data.values);
            },
            onOpen: function() {
                console.log("open");
            },
        });
    }

    function addFamily(famObj){
        var name = "";
        var appellation = "";
        var workplace = "";
        var post = "";
        var phonenum = "";
        if(null != famObj){
            name = famObj.name;
            appellation = famObj.title;
            workplace = famObj.workPlace;
            post = famObj.position;
            phonenum = famObj.phone;
        }

        var dataCount = $("#family-list").find(".data-entry-ctn").size();

        var str='<div class="data-entry-ctn">'
            +'<div class="data-entry-title data-entry-title-bg"><span>家庭成员'+(dataCount+1)+'</span>';
            if(dataCount>0){
                str+= '<div class="del-family-list" onclick="delFamily(this)"><i class="cyfont">&#xe602;</i></div>';
            }
            str +='</div>'
            +'<div class="div-input-line">'
            +'<label><span class="red">*</span>姓名</label>'
            +'<input class="input-name" type="text" value="'+name+'" placeholder="请输入" />'
            +'</div>'
            +'<div class="div-input-line">'
            +'<label><span class="red">*</span>称谓</label>'
            +'<input class="input-appellation" type="text" value="'+appellation+'" placeholder="请选择" />'
            +'</div>'
            +'<div class="div-input-line">'
            +'<label>工作单位</label>'
            +'<input class="input-workplace" type="text" value="'+workplace+'" placeholder="请选择" />'
            +'</div>'
            +'<div class="div-input-line">'
            +'<label>职务</label>'
            +'<input class="input-post" type="text" value="'+post+'" placeholder="请选择" />'
            +'</div>'
            +'<div class="div-input-line">'
            +'<label><span class="red">*</span>联系电话</label>'
            +'<input class="input-phonenum" type="number" value="'+phonenum+'" placeholder="请选择" />'
            +'</div>'
            +'</div>';
        $("#family-list").append(str);

        initListener();
    }

    function delFamily(obj){
        //删除弹窗
        $.confirm("是否确认删除?","温馨提示",
            function () {
                $(obj).parents(".data-entry-ctn").remove();
            },
            function () {
            }
        );

    }

    function nextPage() {
        var homeInfo = "[";

        var trueInfo = true;
        $(".data-entry-ctn").each(function(index){
            var title = $(this).find(".data-entry-title span").html();
            var name = $(this).find(".input-name").val();
            var appellation = $(this).find(".input-appellation").val();
            var workplace = $(this).find(".input-workplace").val();
            var post = $(this).find(".input-post").val();
            var phonenum = $(this).find(".input-phonenum").val();

            if(isBlank(name)){
                $.toast(title+"的姓名不能为空", "text");
                trueInfo = false;
                return false;
            }
            if(isBlank(appellation)){
                $.toast(title+"的称谓不能为空", "text");
                trueInfo = false;
                return false;
            }
            if(isBlank(phonenum)){
                $.toast(title+"的联系电话不能为空", "text");
                trueInfo = false;
                return false;
            }
            var regPhone = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!regPhone.test(phonenum)) {
                $.toast(title+"的手机号码格式不正确", "text");
                trueInfo = false;
                return false;
            }

            if(index > 0){
                homeInfo += ',';
            }
            homeInfo += '{"name":"'+name+'","title":"'+appellation+'","workPlace":"'+workplace+'","position":"'+post+'","phone":"'+phonenum+'"}';

        });

        if(trueInfo){
            homeInfo += ']';
            window.location.href = '/phone/enrollment/infoGrade?homeInfo='+homeInfo+'&releaseId=${releaseId}&token=${token}&applyId=${applyId}';
        }
    }

    function prePage() {
        window.location.href = '/phone/enrollment/infoSchool?releaseId=${releaseId}&token=${token}&applyId=${applyId}';
    }

</script>
</html>
